<template>
  <div>
    <a-date-picker
      :placeholder="placeholder"
      mode="year"
      :disabled="disabled || readOnly"
      v-model="momVal"
      :open="dataopen"
      format="YYYY"
      :allowClear="false"
      @openChange="openChange"
      @panelChange="panelChange"
    />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: "g-year-picker",
  model:{
    prop: "value",
    event: "change"
  },
  props:{
    placeholder:{
      type: String,
      default: '',
      required: false
    },
    value:{
      type: String,
      required: false
    },
    readOnly:{
      type: Boolean,
      required: false,
      default: false
    },
    disabled:{
      type: Boolean,
      required: false,
      default: false
    },
    isInit:{
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {

    let dateStr = !this.value?null:moment(this.value,'YYYY')
    return {
      momVal: this.isInit ? moment(new Date(),'YYYY'): dateStr ,
      dataopen: false
    }
  },
  watch:{
    value (val) {
      if(!val){
        this.momVal = null
      }else{
        this.momVal = moment(val,'YYYY')
      }
    }
  },
  methods:{
    openChange: function(status) {
      if (status) {
        this.dataopen = true;
      } else {
        this.dataopen = false;
      }
    },
    panelChange: function(value){
      this.momVal = value;
      this.dataopen = false;
      this.$emit('change', this.momVal.format('YYYY'),this.momVal);
    },
  },

}
</script>

<style scoped>

</style>